<!DOCTYPE html>
<html>
<head>
    <title>Optics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings to mimic the hand-drawn look
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    // A font that looks somewhat handwritten and bold
    ctx.font = 'bold 28px "Comic Sans MS", "Chalkduster", "Bradley Hand", cursive, sans-serif';
    ctx.textAlign = 'center';

    // Base coordinates and scale
    const yAxis = 150;
    const yDim = 250;
    const lensX = 420;

    // Scale from the problem: 1 cm = 10 pixels
    const focalLengthPixels = 200;
    const tenCmPixels = 100;
    const wireDistPixels = focalLengthPixels + tenCmPixels; // 300 pixels total object distance

    // Calculated X coordinates for key points
    const wireX = lensX - wireDistPixels;    // 420 - 300 = 120
    const leftFX = lensX - focalLengthPixels; // 420 - 200 = 220
    const rightFX = lensX + focalLengthPixels; // 420 + 200 = 620

    // Helper function to draw a line
    function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }

    // Helper function to draw a filled circle
    function drawPoint(x, y, radius = 6) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
    }

    // --- Start Drawing Diagram ---

    // 1. Draw the Principal Axis
    drawLine(50, yAxis, 750, yAxis);

    // 2. Draw the Lens
    drawLine(lensX, yAxis - 90, lensX, yAxis + 90);
    ctx.textBaseline = 'bottom';
    ctx.fillText('lens', lensX, yAxis - 100);

    // 3. Draw the Focal Points (F)
    drawPoint(leftFX, yAxis);
    ctx.fillText('F', leftFX, yAxis - 15);
    drawPoint(rightFX, yAxis);
    ctx.fillText('F', rightFX, yAxis - 15);

    // 4. Draw the Object (wire)
    drawPoint(wireX, yAxis, 8); // Make the wire point slightly larger
    ctx.fillText('wire', wireX - 10, yAxis - 15);

    // 5. Add the "screen" label
    ctx.fillText('screen', rightFX + 100, yAxis - 100);

    // 6. Draw the Dimension Lines and Labels
    const tickHeight = 25;

    // Vertical Ticks extending down from the principal axis
    drawLine(wireX, yAxis, wireX, yDim + tickHeight / 2);
    drawLine(leftFX, yAxis, leftFX, yDim + tickHeight / 2);
    drawLine(lensX, yAxis, lensX, yDim + tickHeight / 2);
    drawLine(rightFX, yAxis, rightFX, yDim + tickHeight / 2);

    // Horizontal Lines for the dimensions
    drawLine(wireX, yDim, lensX, yDim);
    drawLine(lensX, yDim, rightFX, yDim);

    // Add the cross symbol at the intermediate tick mark
    ctx.save();
    ctx.lineWidth = 3;
    ctx.textBaseline = 'middle';
    ctx.font = 'bold 32px "Comic Sans MS", "Chalkduster", "Bradley Hand", cursive, sans-serif';
    ctx.fillText('+', leftFX, yDim);
    ctx.restore();

    // Add Dimension Text Labels below the lines
    ctx.textBaseline = 'top';
    ctx.font = 'bold 26px "Comic Sans MS", "Chalkduster", "Bradley Hand", cursive, sans-serif';
    ctx.fillText('10 cm', (wireX + leftFX) / 2, yDim + 10);
    ctx.fillText('20 cm', (leftFX + lensX) / 2, yDim + 10);
    ctx.fillText('20 cm', (lensX + rightFX) / 2, yDim + 10);

    // 7. Add the Figure Caption
    ctx.fillText('Fig. 2.40', lensX, yDim + 80);

</script>
</body>
</html>